{% extends "base.html" %}

{% block title %}Monthly Reports | Service Performance Reporting Portal{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 28px;
    }

    .page-header h1 {
        margin: 0 0 6px;
        font-size: 28px;
        font-weight: 700;
        color: #1f2933;
    }

    .page-header p {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

    .header-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        font-family: "Poppins", Arial, sans-serif;
    }

    .btn-primary {
        background: #1f2933;
        color: #ffffff;
        padding: 11px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
    }

    .btn-primary:hover {
        background: #111827;
        color: #ffffff;
    }

    .workflow-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 22px;
        margin-bottom: 24px;
    }

    .workflow-title {
        margin: 0 0 18px;
        font-size: 15px;
        font-weight: 700;
        color: #1f2933;
    }

    .workflow {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .workflow-step {
        position: relative;
        padding: 16px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
    }

    .workflow-step-number {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1f2933;
        color: #ffffff;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .workflow-step h3 {
        margin: 0 0 5px;
        font-size: 13px;
        color: #1f2933;
    }

    .workflow-step p {
        margin: 0;
        font-size: 11px;
        line-height: 1.6;
        color: #6b7280;
    }

    .reports-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
    }

    .reports-card-header {
        padding: 20px 22px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    .reports-card-header h2 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: #1f2933;
    }

    .reports-card-header span {
        font-size: 12px;
        color: #6b7280;
    }

    .table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: #f8fafc;
    }

    th {
        padding: 13px 18px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    td {
        padding: 16px 18px;
        font-size: 13px;
        color: #374151;
        border-bottom: 1px solid #f0f1f3;
        vertical-align: middle;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover {
        background: #fafafa;
    }

    .school-name {
        font-weight: 600;
        color: #1f2933;
    }

    .period {
        font-size: 12px;
        color: #6b7280;
    }

    .status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .status-generated {
        color: #92400e;
        background: #fef3c7;
    }

    .status-prepared {
        color: #1d4ed8;
        background: #dbeafe;
    }

    .status-submitted {
        color: #047857;
        background: #d1fae5;
    }

    .status-reviewed {
        color: #166534;
        background: #dcfce7;
    }

    .status-rejected {
        color: #b91c1c;
        background: #fee2e2;
    }

    .action-group {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 11px;
        border-radius: 7px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        font-family: "Poppins", Arial, sans-serif;
        white-space: nowrap;
    }

    .action-btn:hover {
        background: #f9fafb;
        color: #1f2933;
    }

    .action-btn.primary {
        background: #1f2933;
        border-color: #1f2933;
        color: #ffffff;
    }

    .action-btn.primary:hover {
        background: #111827;
        border-color: #111827;
        color: #ffffff;
    }

    .action-btn.success {
        color: #047857;
        border-color: #a7f3d0;
        background: #ecfdf5;
    }

    .action-btn.success:hover {
        background: #d1fae5;
    }

    .action-btn.warning {
        color: #92400e;
        border-color: #fde68a;
        background: #fffbeb;
    }

    .action-btn.warning:hover {
        background: #fef3c7;
    }

    .waiting {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #9ca3af;
        font-size: 11px;
        font-weight: 500;
    }

    .waiting i {
        font-size: 10px;
    }

    .empty-state {
        padding: 65px 25px;
        text-align: center;
    }

    .empty-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: #f3f4f6;
        color: #6b7280;
        font-size: 23px;
    }

    .empty-state h3 {
        margin: 0 0 7px;
        font-size: 16px;
        color: #1f2933;
    }

    .empty-state p {
        margin: 0;
        color: #6b7280;
        font-size: 13px;
    }

    .signed-note {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 4px;
        color: #047857;
        font-size: 10px;
    }

    @media (max-width: 1000px) {
        .workflow {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 700px) {
        .page-header {
            flex-direction: column;
        }

        .header-actions {
            width: 100%;
        }

        .header-actions .btn {
            width: 100%;
        }

        .workflow {
            grid-template-columns: 1fr;
        }

        .reports-card-header {
            align-items: flex-start;
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}

<div class="page-header">
    <div>
        <h1>Monthly Reports</h1>
        <p>
            Manage monthly service performance reports and review signed submissions from schools.
        </p>
    </div>

    <div class="header-actions">
        <form method="POST" action="{{ url_for('generate_monthly_reports') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <button type="submit" class="btn btn-primary">
                <i class="fa-solid fa-file-circle-plus"></i>
                Generate Monthly Reports
            </button>
        </form>
    </div>
</div>


<div class="workflow-card">

    <h2 class="workflow-title">
        <i class="fa-solid fa-route"></i>
        Report Workflow
    </h2>

    <div class="workflow">

        <div class="workflow-step">
            <div class="workflow-step-number">1</div>

            <h3>Prepare Report</h3>

            <p>
                Admin adds the Observium utilization graph and Econet comments
                to the generated report.
            </p>
        </div>


        <div class="workflow-step">
            <div class="workflow-step-number">2</div>

            <h3>School Completes</h3>

            <p>
                The prepared report becomes available to the school to complete,
                print and sign.
            </p>
        </div>


        <div class="workflow-step">
            <div class="workflow-step-number">3</div>

            <h3>School Uploads</h3>

            <p>
                The school scans the signed report and uploads the completed
                signed copy to the portal.
            </p>
        </div>


        <div class="workflow-step">
            <div class="workflow-step-number">4</div>

            <h3>Admin Reviews</h3>

            <p>
                Admin reviews the signed submission and downloads the signed
                report for records and invoicing.
            </p>
        </div>

    </div>

</div>


<div class="reports-card">

    <div class="reports-card-header">

        <div>
            <h2>All Monthly Reports</h2>
        </div>

        <span>
            {{ reports|length }} report{% if reports|length != 1 %}s{% endif %}
        </span>

    </div>


    {% if reports %}

    <div class="table-wrapper">

        <table>

            <thead>
                <tr>
                    <th>School</th>
                    <th>Reporting Period</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Admin Actions</th>
                </tr>
            </thead>


            <tbody>

                {% for report in reports %}

                <tr>

                    <td>
                        <div class="school-name">
                            {{ report.school.name }}
                        </div>
                    </td>


                    <td>
                        <div class="period">
                            {{ report.month }} {{ report.year }}
                        </div>
                    </td>


                    <td>

                        {% if report.status == "generated" %}

                            <span class="status status-generated">
                                <span class="status-dot"></span>
                                Generated
                            </span>

                        {% elif report.status == "prepared" %}

                            <span class="status status-prepared">
                                <span class="status-dot"></span>
                                Waiting for School
                            </span>

                        {% elif report.status == "submitted" %}

                            <span class="status status-submitted">
                                <span class="status-dot"></span>
                                Signed Report Submitted
                            </span>

                        {% elif report.status == "reviewed" %}

                            <span class="status status-reviewed">
                                <span class="status-dot"></span>
                                Reviewed
                            </span>

                        {% elif report.status == "rejected" %}

                            <span class="status status-rejected">
                                <span class="status-dot"></span>
                                Rejected
                            </span>

                        {% else %}

                            <span class="status">
                                <span class="status-dot"></span>
                                {{ report.status|title }}
                            </span>

                        {% endif %}

                    </td>


                    <td>
                        {% if report.created_at %}
                            {{ report.created_at.strftime("%d %b %Y") }}
                        {% else %}
                            —
                        {% endif %}
                    </td>


                    <td>

                        <div class="action-group">

                            {% if report.status == "generated" %}

                                <a
                                    href="{{ url_for('prepare_report', report_id=report.id) }}"
                                    class="action-btn primary"
                                >
                                    <i class="fa-solid fa-pen-to-square"></i>
                                    Prepare Report
                                </a>


                            {% elif report.status == "prepared" %}

                                <span class="waiting">
                                    <i class="fa-solid fa-clock"></i>
                                    Waiting for school
                                </span>


                            {% elif report.status == "submitted" %}

                                <a
                                    href="{{ url_for('review_report', report_id=report.id) }}"
                                    class="action-btn primary"
                                >
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    Review Signed Report
                                </a>

                                {% if report.submission %}

                                    <a
                                        href="{{ url_for('download_report', report_id=report.id) }}"
                                        class="action-btn success"
                                    >
                                        <i class="fa-solid fa-download"></i>
                                        Download Signed Report
                                    </a>

                                {% endif %}


                            {% elif report.status == "reviewed" %}

                                {% if report.submission %}

                                    <a
                                        href="{{ url_for('download_report', report_id=report.id) }}"
                                        class="action-btn success"
                                    >
                                        <i class="fa-solid fa-download"></i>
                                        Download Signed Report
                                    </a>

                                {% else %}

                                    <span class="waiting">
                                        <i class="fa-solid fa-circle-exclamation"></i>
                                        Signed file unavailable
                                    </span>

                                {% endif %}


                            {% elif report.status == "rejected" %}

                                <span class="waiting">
                                    <i class="fa-solid fa-clock"></i>
                                    Waiting for school resubmission
                                </span>


                            {% endif %}

                        </div>


                        {% if report.status in ["submitted", "reviewed"] and report.submission %}

                            <div class="signed-note">
                                <i class="fa-solid fa-file-signature"></i>
                                School signed copy received
                            </div>

                        {% endif %}

                    </td>

                </tr>

                {% endfor %}

            </tbody>

        </table>

    </div>


    {% else %}

    <div class="empty-state">

        <div class="empty-icon">
            <i class="fa-solid fa-file-circle-question"></i>
        </div>

        <h3>No monthly reports yet</h3>

        <p>
            Generate the monthly reports to begin the reporting cycle.
        </p>

    </div>

    {% endif %}

</div>

{% endblock %}